/**
  会员专区页面
 */
<template>
  <div class="vipPage">
    <!-- <div v-if="proList.length > 0"> -->
    <div v-if="true">
      <ActivitySlot class="activityRabatt" :imgTitle="imgTitle">
        <template #section>
          <div class="vipList">
            <div
              class="item"
              v-for="item in proList"
              :key="item.productId"
            >
              <ItemSlot :data="item" @toDetail="toProductDetail(item)">
                <template #extra>
                  <div class="progress">
                    <span>限量{{ item.stockNumber || 0 }}件</span>
                    <el-progress
                      :color="'#C83732'"
                      :show-text="false"
                      :stroke-width="26"
                      :percentage="(item.number / item.stockNumber) * 100 || 0" />
                  </div>
                </template>
                <template #icon>
                  <svg-icon style="width: 57px;height: 57px;" name="activity-vip" />
                </template>
                <template #button>
                  <button class="buy" @click="toProductDetail(item)">立即购买</button>
                </template>
              </ItemSlot>
            </div>
          </div>
        </template>
      </ActivitySlot>
      <el-pagination
        style="margin:20px 0;"
        background
        layout="prev, pager, next, jumper"
        :page-size="listquery.pageSize"
        :current-page="listquery.page"
        @current-change="changePage"
        :total="total" />
    </div>
    <div v-else class="noproduct">
      <svg-icon style="width: 240px; height: 240px; margin-bottom: 20px;" name="user-order-nodata" />
      <p class="fs20 font-color-999">该活动没有商品～</p>
    </div>
  </div>
</template>

<script setup>
import ActivitySlot from '@/components/activity/activitySlot.vue'
import ItemSlot from '@/views/promotions/components/itemSlot.vue'
import SvgIcon from '@/components/svgIcon/index.vue';

import {
  getVipList
} from '@/api/Activity/ActivityVip.js'
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'

const imgTitle = ref('static/image/activity/vipTitle.webp')
const listquery = ref({
  page: 1,
  pageSize: 10,
  type: 0,
  volume: 0
})
const total = ref(0)
const proList = ref([])
onMounted(()=>{
  handleGetVipList()
})

async function handleGetVipList () {
  const response = await getVipList(listquery.value)
  const res = response.data
  proList.value = res.data.list.map(item => {
    if (item.mode === 2) {
      item.price = item.discount
    }
    // item.price = item.discount || 0
    return item
  })
  total.value = parseInt(res.data.total)
}

// 翻页
function changePage (val) {
  listquery.value.page = val
  handleGetVipList()
}

const router = useRouter()
function toProductDetail (row) {
  let data = {
    productId: row.productId,
    shopId: row.shopId,
    skuId: row.skuId
  }
  router.push({
    path: '/productDetail',
    query: {
      proData: JSON.stringify(data)
    }
  })
}
</script>

<style lang="scss" scoped>
.vipPage{
  max-width: 1250px;
  min-height: 600px;
  margin: auto;
  .noproduct{
    margin: 80px 0;
    text-align: center;
  }
  .vipList {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    .item {
      width: 23%;
      margin: 20px 1%;
      transition: all 0.3s linear;
      .progress{
        width: 100%;
        height: 40px;
        background-color: #DADBDC;
        position: absolute;
        bottom: 0;
        display: flex;
        align-items: center;
        span{
          margin-left: 10px;
        }
        :deep(.el-progress){
          flex: 1;
          height: 10px;
          margin: 0 10px;
          // .el-progress-bar{
          //   height: 10px;
          // }
          .el-progress-bar__outer,.el-progress-bar__inner{
            border-radius: 0;
            height: 10px !important;
          }
        }
      }
      .buy{
        width: 100%;
        height: 40px;
        padding: 0;
        margin: 15px 0 0;
        background: linear-gradient(90deg, #C83732 0%, #E25C44 100%);
        box-shadow: 0px 3px 6px rgba(233, 0, 0, 0.3);
        cursor: pointer;
      }
    }
    .item:hover{
      box-shadow:0 0 20px #cccccc;
    }
  }
}
</style>
